<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	   *{
	   	margin:0;
	   	padding:0;
      
	   }
     body{
      text-align: center;
     }
    #canvas{
          	border:1px solid #000;
          	background-color: yellow;
            margin:30px;

          }
   button{
      display: inline-block;
      width: 60px;
      height: 30px;

   }
	</style>
</head>
<body>
	<canvas width="400px" height="200px" id="canvas"></canvas>
	<div>
     <button id="start">start</button>
     <button id="end">stop</button> 
  </div>
	<script>
       window.onload=function(){
       	    var can=document.getElementById("canvas");
       	    var cxt=can.getContext("2d");
       	    var canvas_width=parseInt(canvas.width);
       	    var canvas_height=parseInt(canvas.height);
       	    var map=[];
       	    var size=10;
       	    var lon=10;
       	    var fail=false;
       	    var direction=2;//右边
       	    var food=[];
       	    var x=50,y=50;
       	    function drawSnake(){
       	    	cxt.fillStyle="#000";
      
       	    	switch(direction){
       	    		case 0:x-=size;break;
       	    		case 1:y-=size;break;
       	    		case 2:x+=size;break;
       	    		case 3:y+=size;break;

       	    	}
       	    	if(fail){
       	    		alert("game over");
       	    		window.location.reload();
       	    	}else{
       	    		cxt.fillRect(x,y,size-1,size-1);
                check();
                if(fail){
                  alert("game over");
                  window.location.reload();
                }
       	    		map.push({"x":x,"y":y});
       	    		if(map.length>lon){
       	    			var fir=map.shift();
       	    			cxt.clearRect(fir.x,fir.y,size,size);
       	    		}
       	    		for(var i=0;i<food.length;i++){
       	    			if(food[i].x==x&&food[i].y==y){
       	    				lon++;
       	    			}
       	    		}
                   setTimeout(drawSnake,300);
       	    	}
       	    	

       	    }
       	    function drawFood(){
       	    	cxt.fillStyle="red";
       	    	if(!fail){
       	    		var x1=Math.floor((Math.random()*(canvas_width-30))/10)*10;
       	    		var y1=Math.floor((Math.random()*(canvas_height-30))/10)*10;
       	    		cxt.fillRect(x1,y1,size-1,size-1);
       	    		food.push({"x":x1,"y":y1});
       	    		setTimeout(drawFood,8500);
       	    	}
       	    }
       	    function check(){
       	    	if(x+size-1>canvas_width||x<0||y+size-1>canvas_height||y<0){
       	    		 fail=true;
       	    	}
       	    	for(var i=0;i<map.length;i++){
                     if(map[i].x==x&&map[i].y==y){
                     	 fail=true;
                     }
       	    	}
  
       	    }
       	    function render(){
       	    	document.onkeydown=function(event){
                     var e=event||window.event;
                     var kc=e.keyCode-37;
                     switch(kc){
                     	   //left
                          case 0:direction==2?direction=2:direction=0;break;
                          //up
                          case 1:direction==3?direction=3:direction=1;break;
                          //right
                          case 2:direction==0?direction=0:direction=2;break;
                          //down
                          case 3:direction==1?direction=1:direction=3;break;

                     }
       	    	}
       	    }
       	   document.getElementById("start").onclick=function(){
       	   	 render();
       	     drawFood();
       	     drawSnake();
       	   }
       	   document.getElementById("end").onclick=function(){
       	   	   window.location.reload();
       	   }
       }
	</script>
</body>
</html>